<template>
  <div class="container">
    <!-- 顶部个人信息栏 -->
    <div class="header">
      <div class="profile">
        <img src="https://img0.baidu.com/it/u=3600954679,641662266&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1739293200&t=7d106f5b72c49e0a3e7047a4824470a9" alt="用户头像" width="50px" height="50px">
        <div class="user-info">
          <span class="user-name">{{ user.nickname }}</span>
        <span class="vip-tag">黄金VIP</span>
        </div>
      <a href="#" @click="toupdate(user)">设置</a>
      </div>
      <p class="intro">{{ user.introduction}}</p>
      <div class="stats">
        <span>粉丝 999</span>
        <span>关注 18</span>
        <span>获赞 666</span>
        <span>赞过 88</span>
      </div>
    </div>

    <!-- 订单相关信息 -->
    <div class="order-info">
      <ul>
        <li><a href="http://localhost:8080/#/order">我的订单</a></li>
        <li><a href="#">待付款</a></li>
        <li><a href="#">待使用</a></li>
        <li><a href="#">待评价</a></li>
        <li><a href="#">退换/售后</a></li>
      </ul>
    </div>

    <!-- 工具与服务 -->
    <div class="tools-services">
      <h3>工具与服务</h3>
      <div class="tool-icons">
        <div class="tool-icon">
          <i class="icon-user-research"></i>
          <button @click="tiao">用户调研</button>
        </div>
        <div class="tool-icon">
          <i class="icon-business-cooperation"></i>
          <span>商务合作</span>
        </div>
        <div class="tool-icon">
          <i class="icon-travel-footprint"></i>
          <span>旅行足迹</span>
        </div>
        <div class="tool-icon">
          <i class="icon-common-info"></i>
          <span>常用信息</span>
        </div>
        <div class="tool-icon">
          <i class="icon-travel-list"></i>
          <span>出行清单</span>
        </div>
        <div class="tool-icon">
          <i class="icon-creation-center"></i>
          <span>创作中心</span>
        </div>
      </div>
    </div>

    <el-dialog title="个人信息" :visible.sync="dialogFormVisible" before-close="closeDialog">
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="签名" :label-width="formLabelWidth">
          <el-input v-model="form.introduction" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="adduser">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      formLabelWidth: '120px',
      dialogFormVisible: false,
      form:{
        userId:"",
        nickname: "",
        password: "",
        introduction: "",
      },
      user: {}
    };
  },
  created() {
    this.findPage();
  },
  methods:{
    adduser(){
      this.form.userId=this.userId;
      axios.post(`http://localhost:1000/user/update`,this.form).then(res=>{
        this.form={
          userId:"",
          nickname: "",
          password: "",
          introduction: "",
        };
        this.dialogFormVisible=false;
        this.findPage();
      })
    },
    toupdate(user){
      this.dialogFormVisible=true;
      this.form=JSON.parse(JSON.stringify(user));
    },
    findPage(){
      var userStr = localStorage.getItem("username")
      this.username=JSON.parse(userStr);
      axios.post(`http://localhost:1000/user/findid?username=`+this.username).then(res=>{
        this.user=res.data;
      })
    },
    tiao(){
      this.$router.push({path: '/yon'});
    }

  },

};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.header {
  background-color: #007bff;
  color: #fff;
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.profile {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-info {
  margin-left: 10px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
}

.vip-tag {
  background-color: #ffd700;
  color: #000;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  margin-left: 5px;
}

.setting {
  margin-left: auto;
  color: #fff;
  text-decoration: none;
}

.intro {
  margin-bottom: 10px;
}

.stats {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.order-info {
  width: 100%;
  margin-top: 20px;
}

.order-info ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.order-info li {
  flex: 1;
  text-align: center;
}

.order-info a {
  text-decoration: none;
  color: #000;
}

.tools-services {
  width: 100%;
  margin-top: 20px;
}

.tools-services h3 {
  margin-bottom: 10px;
}

.tool-icons {
  display: flex;
  justify-content: space-between;
}

.tool-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-user-research,
.icon-business-cooperation,
.icon-travel-footprint,
.icon-common-info,
.icon-travel-list,
.icon-creation-center {
  width: 30px;
  height: 30px;
  background-color: #007bff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin-bottom: 5px;
}

.footer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.footer a {
  text-decoration: none;
  color: #000;
}
</style>